<template>
  <div>
      <h3>待办任务</h3>
      <input type="text" placeholder="输入内容后回车"
       @keyup.enter="fabu"
       v-model="msg"
      >
      <ul>
          <!-- <li>ID:1,内容：666</li>
          <li>2.3888</li>
          <li>3.999</li> -->
           <li v-for="(v,k) in todo" :key="'todo_'+k">
               ID:{{v.id}},内容：{{v.title}}
               &nbsp;
               <a href="#" @click.prevent="delTodo(k)">删除</a>
           </li>
      </ul>
  </div> 
</template>

<script>
    export default {
        data(){
            return {
                msg:"",//表单值
                // 1.列表
                todo:[
                    // 这个列表中的内容比较复杂，有id,标题多个信息，用对象字面量表示(对象可以表示一堆信息)
                    {
                        id:1,
                        title:"666"
                    },
                    {
                        id:2,
                        title:"吉祥"
                    },
                    {
                        id:3,
                        title:"如意"
                    }
                ]
            }
        },
        methods:{
            // 2.添加，本质上向数组中添加一个元素，这儿的元素是一个对象
            fabu(){
                // 1个代办任务
                let item = {
                    id:Math.round( Math.random()*100 ), //1-100 之间的整数
                    title:this.msg
                }
                this.todo.push(item)
            },
            delTodo(num){
                // 3.删除，本质上是删除数组中的元素，不管理是什么，通过直标即可
                this.todo.splice(num,1)
            }
        }
    }
</script>

<style>

</style>